<template>
  <div :style="fontStyle">
    <div class="rate" @mouseout="onMouseout">
      <span
        v-for="item in 5"
        @mouseover="onMouseover(item)"
        @click="selectRate(item)"
        >☆</span
      >
      <span class="rate__star" :style="fontWidth">
        <span
          v-for="item in 5"
          @mouseover="onMouseover(item)"
          @click="selectRate(item)"
          >★</span
        >
      </span>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const props = defineProps({
  modelValue: Number,
  color: String,
});

let rate = ref(props.modelValue);

const themeObj = {
  black: '#00',
  white: '#fff',
  red: '#f5222d',
  orange: '#fa541c',
  yellow: '#fadb14',
  green: '#73d13d',
  blue: '#40a9ff',
};

const fontStyle = computed(() => {
  return { color: themeObj[props.color] };
});

const fontWidth = computed(() => {
  return { width: `${rate.value * 82.5}px` };
});

function onMouseover(num) {
  rate.value = num;
}

function onMouseout() {
  rate.value = props.modelValue;
}

const emits = defineEmits(['update:modelValue']);
function selectRate(num) {
  emits('update:modelValue', num);
}
</script>

<style lang="css">
.rate {
  position: relative;
  display: inline-block;
  font-size: 100px;
}
.rate__star {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  display: inline-block;
}
</style>
